import React,{Component,Fragment} from "react";
import XiaojiejieItem from "./XiaojiejieItem";
import Boss from "./Boss";
import axios from 'axios'
import {CSSTransition,TransitionGroup} from 'react-transition-group'

class Xiaojiejie extends Component{
    //在某一时刻可以自动执行的函数
    constructor(props){
        super(props)
        this.state = {
            inputValue:'',
            list:['1']
        }
    }
    //声明周期函数 
    //mounting
    componentWillMount(){
        console.log('componentWillMount --- 组件将要挂载到页面的时刻 mounting  1')
    }
    componentDidMount(){
        console.log('componentDidMount --- 组件挂在完成时刻 mounting 3')
        axios.get('http://rap2api.taobao.org/app/mock/292931/index')
            .then((res)=>{
                console.log(res)
                this.setState({
                    list: res.data.list
                })
            
            })
            .catch(error=>{console.log('error' + error)})
    }

    //update
    shouldComponentUpdate(){
        //如果是true 将会往下执行，如果是false 将不会往下执行
        console.log('shouldComponentUpdate --- 当值改变时重新更新组件 render之前    update -1')
        return true
    }

    componentWillUpdate(){
        console.log('componentWillUpdate --- 在shouldComponentUpdate之后执行，如果scu返回的是false 将不执行 update - 2')
    }

    componentDidUpdate(){
        console.log('componentDidUpdate --  已经渲染成了dom update -4' )
    }


    render(){
        console.log('render --  组件挂在中 mounting  2 update -3')
        return(
            <Fragment>
                {/* 注释 */}
                {
                    //注释
                }
                <div><label htmlFor="input">增加服务：</label> 
                <input id="input" 
                    value={this.state.inputValue} 
                    onChange={this.addClick.bind(this,'change')}
                    ref = {(input)=>{this.input = input}}
                    /> 
                <button onClick={this.addClick.bind(this)}>增值服务</button></div>
                <ul ref={(ul)=>{this.ul = ul}}>
                    <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <CSSTransition timeout={2000} key={index+item} classNames='box-test' unmountOnExit appear={true} >
                                        <XiaojiejieItem key={index + item} avname="奥利好" content={item} index={index} deleteClik={this.deleteClick.bind(this)}/>
                                    </CSSTransition>
                                
                            )
                        //    return <li key={index + item} dangerouslySetInnerHTML={{__html:item}}>
                                    
                        //          </li>
                        })
                    }
                    </TransitionGroup>
                </ul>
                <Boss/>
            </Fragment>
        )
    
    }
    addClick(is,e){
        if(is === 'change'){
            // this.setState({
            //     inputValue: e.target.value,
            // })
            //使用ref
            this.setState({
                inputValue: this.input.value,
            })
        }else{
            this.setState({
                inputValue: '',
                list:[...this.state.list,this.state.inputValue]
            },()=>{
                console.log(this.ul.querySelectorAll('li').length)
            })
        }
        
    }
    deleteClick(value){
        console.log(value)
        let arr = this.state.list
        arr.splice(value,1)
       this.setState({
           list: arr
       })
    }
}

export default Xiaojiejie